<template>
	<view class="main">
		<view>
			<view class="searchBtn" @click="openSearch">查询使用记录</view>
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="form" labelWidth='180' labelAlign='left'
				:labelStyle="{marginLeft: '10px',fontSize: '30rpx',color: '#1D2129',height:'96rpx',lineHeight:'96rpx'}"
				:borderBottom="true">
				<u-form-item label="房车名称" prop="rvInfo" borderBottom class='formItemWp'>
					<u--input v-model="formData.rvInfo" readonly border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="姓名" prop="userName" required borderBottom class='formItemWp'>
					<u--input v-model="formData.userName" border="none" placeholder='请输入姓名'>
					</u--input>
				</u-form-item>
				<u-form-item label="联系方式" prop="mobile" required borderBottom class='formItemWp'>
					<u--input v-model="formData.mobile" border="none" placeholder='请输入联系方式'>
					</u--input>
				</u-form-item>
				<u-form-item label="入住时间" prop="inTime" required borderBottom class='formItemWp'>
					<!-- 					<uni-datetime-picker @change="checkTime1">
						<u--input v-model="formData.inTime" border="none" readonly fontSize="30rpx" placeholder="请选择入住时间"
							placeholderStyle="font-size:30rpx;color:#999"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</uni-datetime-picker> -->
					<view class="dateTimeView">
						<text @click="date1show = true">{{formData.inTime || '点击选择入住时间'}}</text>
					</view>
				</u-form-item>
				<u-form-item label="离开时间" prop="outTime" required borderBottom class='formItemWp'>
					<!-- 					<uni-datetime-picker @change="checkTime2">
						<u--input v-model="formData.outTime" border="none" readonly fontSize="30rpx" placeholder="请选择离开时间"
							placeholderStyle="font-size:30rpx;color:#999"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</uni-datetime-picker> -->
					<view class="dateTimeView">
						<text @click="date2show = true">{{formData.outTime || '点击选择离开时间'}}</text>
					</view>
				</u-form-item>
				<u-form-item label="价格" prop="price" borderBottom class='formItemWp'>
					<u--input v-model="formData.price" border="none" placeholder='请输入价格'>
					</u--input>
				</u-form-item>
				<u-form-item label="办理人" prop="handleUser" borderBottom class='formItemWp'>
					<u--input v-model="formData.handleUser" border="none" placeholder='请输入办理人'>
					</u--input>
				</u-form-item>
				<u-form-item label="预约餐厅" prop="diningTime" borderBottom class='formItemWp'>
					<!-- 					<u-checkbox-group @change="checkboxGroupChange" :size='30'>
						<view class="checkbox">
							<view class="chechItem" v-for="(item, index) in checkedlist" :key="index">
								<u-checkbox v-model="item.checked" :name="item.name">{{item.name}}</u-checkbox>{{item.name}}
							</view>
						</view>
					</u-checkbox-group> -->
					<view class="dateTimeView">
						<text @click="date3show = true">{{formData.diningTime || '点击选择预约日期'}}</text>
					</view>
				</u-form-item>
				<u-form-item label="备注" prop="remark" borderBottom class='formItemWp'>
					<u--input v-model="formData.remark" border="none" placeholder='请输入备注'>
					</u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="submitWp bottomBar">
			<view class="submitBtn">
				<u-button :disabled="isOk" @click="submit" :throttleTime="1000" color="#276aee">{{isOk ? '已提交':'保存'}}</u-button>
			</view>
		</view>

		<u-datetime-picker :show="date1show" :minDate='minDate' @confirm="confirm11" @cancel='cancel1'
			mode="datetime"></u-datetime-picker>
		<u-datetime-picker :show="date2show" :minDate='minDate' @confirm="confirm22" @cancel='cancel2'
			mode="datetime"></u-datetime-picker>
		<u-datetime-picker :show="date3show" :minDate='minDate' @confirm="confirm33" @cancel='cancel3'
			mode="date"></u-datetime-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date1value: '',
				minDate: Date.now(),
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				date1show: false,
				date2show: false,
				date3show: false,
				date1value: '',
				date2value: '',
				date3value: '',
				isOk: false,
				chckcArr: [],
				checkedlist: [{
					name: '午餐',
					checked: false,
				}, {
					name: '晚餐',
					checked: false,
				}, ],
				formData: {
					rvInfo: '',
					userName: '',
					mobile: '',
					inTime: '',
					outTime: '',
					price: '',
					handleUser: '',
					diningTime: '',
					remark: '',
					rvId: '',
				},
				rules: {
					userName: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur'],
					}, ],
					mobile: [{
						required: true,
						message: '请输入联系方式',
						trigger: ['blur'],
					}],
					inTime: [{
						required: true,
						message: '请选择入住时间',
						trigger: ['blur'],
					}],
					outTime: [{
						required: true,
						message: '请选择离开时间',
						trigger: ['blur'],
					}],
				},
			}
		},
		onLoad(e) {
			this.formData.rvId = e.scene
			this.queryById();
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			cancel3() {
				this.date3show = false
			},
			cancel2() {
				this.date2show = false
			},
			cancel1() {
				this.date1show = false
			},
			confirm33(e) {
				let _date = new Date(e.value)
				this.date3value = e.value
				this.formData.diningTime = _date.getFullYear() + '-' + (_date.getMonth() + 1) + '-' + _date.getDate()
				this.date3show = false;
			},
			confirm11(e) {
				console.log(e)
				console.log(e.value)
				console.log(new Date(e.value))
				let _date = new Date(e.value)
				this.date1value = e.value
				this.formData.inTime = _date.getFullYear() + '-' + (_date.getMonth() + 1) + '-' + _date.getDate() + ' ' + _date
					.getHours() + ':' + _date.getMinutes() + ':00'
				this.date1show = false;
			},
			confirm22(e) {
				let _date = new Date(e.value)
				if (!this.formData.inTime) {
					this.$refs.uToast.show({
						message: '请先选择入住时间！',
						type: 'warning',
					})
					return;
				}
				if (this.date1value > e.value) {
					this.$refs.uToast.show({
						message: '离开时间不能在入住时间之前！',
						type: 'warning',
					})
					return;
				}
				this.formData.outTime = _date.getFullYear() + '-' + (_date.getMonth() + 1) + '-' + _date.getDate() + ' ' + _date
					.getHours() + ':' + _date.getMinutes() + ':00'
				this.date2show = false;
			},
			openSearch() {
				uni.navigateTo({
					url: '/pagesBusiness/rvManagement/rvSearch'
				})
			},
			checkboxGroupChange(e) {
				console.log(e)
				this.chckcArr = e

			},
			async queryById() {
				let res = await this.$api.queryByIdRv({
					id: this.formData.rvId
				})
				this.formData.rvInfo = res.result.rvInfo
				this.formData.price = res.result.price
			},
			async submit() {

				this.$refs.form.validate().then(async res => {
					if (Date.parse(this.formData.inTime) > Date.parse(this.formData.outTime)) {
						uni.$u.toast('离开时间不能在入住时间之前！')
						return;
					}
					let res1 = await this.$api.rvApplyRecordAdd(this.formData)
					uni.$u.toast(res1.message)
					if (res1.success) {
						this.isOk = true
					}
				}).catch(errors => {
					console.log(errors);
					uni.$u.toast('内容填写有误,请修改或补充')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-bottom: 200rpx;
	}

	.formItemWp {
		margin: 0 50upx;
		height: 108rpx;
		border-bottom: #666;
	}

	.submitWp {
		z-index: 9;
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		box-sizing: border-box;

		.submitBtn {
			margin: 30rpx 50rpx;
		}
	}

	.searchBtn {
		margin: 20rpx auto;
		width: 500rpx;
		height: 50rpx;
		border: 1px solid #333;
		border-radius: 12rpx;
		color: #333;
		line-height: 50rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
	}

	::v-deep .u-form-item__body__left__content__label {
		font-weight: 600 !important;
	}

	::v-deep .u-form-item__body {
		padding: 10rpx 0 !important;
	}

	.checkbox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 60%;

		.chechItem {
			display: flex;
			align-items: center;
			justify-content: space-around;

			::v-deep .u-icon__icon {
				font-size: 28rpx !important;
			}
		}
	}
</style>
